<template>
  <page-model
  :breadHeard=breadHeard
  @backLast="backLast"
  >
    <div class="main">
      <header>
        <div class="addItem" @click="addItem">添加</div>
      </header>
      <table border="0" cellspacing="0" cellpadding="0">
        <thead>
          <th>序号</th>
          <th>类目名称</th>
          <th>文件数</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item,index) in this.$store.state.file.cateDataList" :key="item.id">
            <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
            <td>{{item.name}}</td>
            <td>{{item.count}}</td>
            <td>
              <span class="write"  v-if="item.name !== '其他'" @click="writeItem(item)">编辑</span>
              <span class="delete"  v-if="item.name !== '其他'" @click="ShowdeleteBox(item)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="block" v-show="this.$store.state.file.cateListCount">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total=" this.$store.state.file.cateListCount"
        ></el-pagination>
      </div>
      <!-- 当表头为空时 -->
      <div class="empty" v-if="!this.$store.state.file.cateListCount">
        <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
        <span>空空如也</span>
      </div>
      <!-- 类目添加组件 -->
      <div class="addItem" v-if="this.$store.state.ifShowCover&&this.$store.state.showAddItem">
        <addItemBox :ifEditOrAdd="ifEditOrAdd" :updateItemInfo="updateItemInfo"></addItemBox>
      </div>
    </div>
    <delete-alert-box
      v-if="isShowDelete"
      :isDelete=isDelete
      :descTips=descTips
      @Confirm=Confirm
      @Cancel=Cancel
      ></delete-alert-box>
</page-model>

</template>

<script>
import { deleteItem } from '@/api/documentModule'
import addItemBox from './addItemBox'
export default {
  data () {
    return {
      breadHeard: {
        title: '类目管理',
        firstBread: '专家资料',
        secondBread: '类目管理'
      },
      id: 1,
      itemList: [],
      currentPage: +'',
      // 展示添加框为1 展示编辑框为2
      ifEditOrAdd: '',
      updateItemInfo: {},
      index: 1,
      pageSize: 10,
      deleteItemInfo: {},
      descTips: [],
      isDelete: false,
      deleteId: '',
      isShowDelete: false
    }
  },
  methods: {
    backLast () {
      this.$router.push('/professorMain')
    },
    async getItemList () {
      await this.$store.dispatch('file/updateCateDataList', {
        index: this.index,
        item: this.id,
        pageSize: this.pageSize
      })
    },
    handleCurrentChange (val) {
      // console.log(val)
      this.index = val
    },
    addItem () {
      this.ifEditOrAdd = 1
      this.$store.state.showDeleteItemBox = false
      this.$store.state.showAddItem = true
      this.$store.commit('set_ifShowCover', true)
    },
    writeItem (item) {
      this.$store.state.showDeleteItemBox = false
      this.updateItemInfo = item
      this.ifEditOrAdd = 2
      this.$store.state.showAddItem = true
      this.$store.commit('set_ifShowCover', true)
    },
    ShowdeleteBox (item) {
      this.deleteId = item.id
      if (!Number(item.count)) {
        this.descTips = [{
          tips: `确定删除"${item.name}"类目？`,
          default: ''
        }]
        this.isDelete = true
      } else {
        this.descTips = [{
          tips: '类目下已有关联文件，无法删除类目！',
          default: ''
        }]
        this.isDelete = false
      }
      this.isShowDelete = true
    },
    async Confirm () {
      // console.log('确定')
      const { data: res } = await deleteItem(this.deleteId)
      // console.log(res)
      if (res.code === 200) {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000
        })
        this.isShowDelete = false
        this.getItemList()
      } else {
        this.$message({
          message: res.message,
          type: 'error',
          duration: 1000
        })
      }
    },
    Cancel () {
      this.isShowDelete = false
      // console.log('取消')
    }
  },
  components: {
    addItemBox
  },
  created () {
    this.getItemList()
  }
}
</script>

<style lang="scss" scoped>
.main {
  header {
    position: relative;
    height: 90px;
    border-bottom: 1px solid #f2f2f2;
    .addItem {
      cursor: pointer;
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      width: 108px;
      height: 42px;
      background: rgba(72, 104, 255, 1);
      border-radius: 21px;
      font-size: 16px;
      color: rgba(255, 255, 255, 1);
      line-height: 42px;
      text-align: center;
    }
  }
  table {
    position: relative;
    margin-top: 20px;
    width: 96%;
    margin-left: 30px;
    text-align: left;
      thead {
        font-weight: 500;
        font-size: 14px;
        background: rgba(87, 131, 255, 0.05);
        th {
          color: rgba(51, 51, 51, 1);
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: solid 1px rgba(230, 230, 230, 1);
        }
      }
    tbody {
      tr {
        height: 64px;
        td {
          font-size: 14px;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          padding-left: 24px;
          border-bottom: solid 1px #f2f2f2;
          .write {
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: rgba(72, 104, 255, 1);
            text-decoration: underline;
          }
          .delete {
            cursor: pointer;
            margin-left: 24px;
            font-size: 14px;
            font-weight: 500;
            color: #fb4646;
            text-decoration: underline;
          }
        }
      }
    }
  }
    .block {
      padding: 24px 0;
      margin-right: 28px;
      overflow: hidden;
      ::v-deep .el-pagination{
        float: right;
      }
    }
  .empty {
    position: relative;
    .emptyLogo {
      position: absolute;
      top: 156px;
      left: 50%;
      transform: translateX(-50%);
      width: 240px;
      height: 240px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      position: absolute;
      top: 408px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
@import "@/styles/writeBox.scss";
  .main{
    min-height: calc(100% - 130px);
    margin-top: 24px;
  }
</style>
